<template>
    <div>
        <ul class="list">
            <li class="list-item" :class="{itemcolor:index%2==0}"  v-for="(item, index) in list" :key="index" >
                <!-- <li class="list-item" v-for="(item, index) in list" :key="index" >  -->
                <a :href="item.link">
                    <p class="item_title">{{item.title}}</p>
                    <div class="item_bar">
                        <span class="item_flag">最新动态</span>
                        <span class="item_time">{{ item.time}}</span>
                    </div>
                </a>                                  
            </li>
        </ul>
 </div>
</template>

<script>
import { queryNewList } from '@/assets/js/service'
export default {
    props:["city"],
    data(){
        return {
         list:[]
        }
    },
    created () {
        var _this = this;
        _this.requestList("");
    },
    methods: {
        requestList(_city){
            var _this = this;
            console.log("requestList",_city)
            var param={"area":decodeURI(_city)};
            queryNewList(param,function(res){
                if(res){
                    _this.list=[];
                    res.forEach((_item,_index)=>{
                        if(_index<10){
                            _this.list.push(_item)
                        }
                    })
                }else{
                    console.log("返回数据异常",res)
                    _this.$showBottomToast("请求数据异常！")
                }
                _this.$emit("loadLocal")//数据渲染完成到主页面找到下一模块位置
            })
        }
    },
    mounted: function () {
        
    },
}
</script>

<style lang="less" scoped>
    .list{
        .itemcolor{
            // background-color: rgba(0, 0, 0, 0.4) !important;
        }
        .list-item{
            border-bottom-color: #dddddd;
            border-bottom-width: 1px;
            border-bottom-style: solid;
            display: block;
            text-align: left;
            width: 100%;
            // background-color: rgba(0, 0, 0, 0.2);
            padding: 3% 5%;
            overflow: hidden;
            .item_title {
              overflow: hidden;  
              display: -webkit-box;  
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical; 
              font-size: 15px;
              color: #333333;
            }
            .item_bar{
                width: 100%;
                height: 10%;;
                float: left;
                span{
                    display: inline-block;
                    float: left;
                    font-size: 12px;
                    line-height: 30px;
                    height: 30px;
                    // color: rgba(209, 244, 254, 0.7);
                    color: #333333;
                }
                .item_flag{
                    width: 50%;
                }
                .item_time {
                    width: 50%;
                    text-align: right;
                   
                }
            }
            
        }
    }
</style>